@import "../../styles/mixins.scss";
@import "../../styles/animation.scss";
@import "../../styles/extends.scss";

.dark {
  @extend %container-dark;

  h1 {
    @extend %title-dark;
    @apply text-myTheme-dark
  }
}

.light {
  @extend %container-light;

  h1 {
    @extend %title-light;
    @apply text-slate-100;
  }
}

.dark, .light {
  min-height: fit-content;
  height: calc(100vh - 7rem);
  @apply
  items-center
  justify-center;

  .title {
    @apply 
    absolute
    top-0
    left-1/2
    -translate-x-1/2
    w-11/12
    flex
    justify-center
    items-start
    z-20;

    h1 {
      @extend %title;
      @apply max-md:text-wrap;
    }
  }

  .main {
    @apply
    flex
    flex-row
    justify-between
    items-center
    h-5/6
    min-h-fit
    w-11/12
    px-0
    max-w-screen-2xl
    z-10

    max-lg:w-full;

    .main__nav {
      @apply relative
      h-full
      w-128
      z-20

      max-md:h-100
      max-md:w-100;

      .nav__bg {
        @apply absolute
        top-1/2
        -translate-y-1/2
        -left-2
        h-128
        w-128

        max-md:h-100
        max-md:w-100

        max-lg:-left-1;

        img {
          @apply
          h-full
          w-full;
        }
      }

      .nav__list {
        @apply absolute
        top-1/2
        -translate-y-1/2
        left-10
        h-fit
        w-fit
        rotate-6
        flex
        flex-col
        justify-center
        z-20
        
        max-lg:left-9;

        .nav__li {
          @apply 
          w-fit
          h-fit
          block;

          button {
            @include return-anim-duration-500();
            @apply
            text-9xl
            font-black
            uppercase
            select-none
            
            max-md:text-8xl;

            &:hover {
              @include anim-duration-500();
              @apply text-myTheme-accent
              translate-x-4
              cursor-pointer;
            }
          }
        }
      }
    }

    
    .main__bg {
      @apply
      flex-1
      h-full
      min-w-100
      max-w-3xl
      pt-4

      max-sm:w-full
      max-sm:min-w-full

      max-md:absolute
      max-md:right-0
      max-md:min-w-56
      max-md:max-w-80
      max-md:py-20

      max-lg:z-0;
    }
  }


  .dev {
    @apply absolute
    bottom-5
    left-1/2
    -translate-x-1/2
    w-full
    h-fit
    text-3xl
    uppercase
    font-myTitleFont
    font-black
    text-center
    cursor-default
    text-myTheme-accent
    z-40
    
    max-sm:text-xl

    max-md:text-wrap
    max-md:text-2xl;
  }
}
